import {
  observer,
  useFieldSchema,
  useFormEffects,
  useField,
} from '@formily/react';
import React, { FC, useState, useEffect } from 'react';
import { onFormValuesChange } from '@formily/core';
import { Space } from 'antd';
import style from './style.less';
const GetFormValue: FC = observer(() => {
  const [values, setValues] = useState<any[]>([]);
  useFormEffects(() => {
    // 监听字段
    onFormValuesChange((form: any) => {
      const object: any[] = [];
      Object.keys(form.fields).map((key: string) => {
        if (key) {
          const field = form.fields[key];
          if (field.decoratorType === 'FormItem' && field.value !== undefined) {
            const item = {
              label: field.title,
              value: field.value,
              key,
            };
            if (field.dataSource && field.dataSource.length !== 0) {
              item.value = field.dataSource.find(
                (data: any) => data.value === field.value,
              )?.label;
            }
            object.push(item);
          }
        }
      });
      setValues(object);
    });
  });
  return (
    <ul className={style.getFormValue}>
      {values.map(({ value, label, key }) => {
        return (
          <li key={key}>
            <p>
              {label}：{value}
            </p>
          </li>
        );
      })}
    </ul>
  );
});
export default GetFormValue;
